<template>
  <div>
    <div id="lucky-sheet" class="lucky-sheet"></div>
  </div>
</template>

<script>
import { loadRemote, loadCssRemote, config } from '@vimi/utils-tool'

const lsJsCdn = `${config.baseUrl}/libs/luckysheet/2.1.13/luckysheet.umd.js`
const lsJsPluginCdn = `${config.baseUrl}/libs/luckysheet/2.1.13/plugins/js/plugin.js`
const lsCssCdn = `${config.baseUrl}/libs/luckysheet/2.1.13/css/luckysheet.css`
const lsCssFontCdn = `${config.baseUrl}/libs/luckysheet/2.1.13/assets/iconfont/iconfont.css`
const lsCssPluginCdn = `${config.baseUrl}/libs/luckysheet/2.1.13/plugins/plugins.css`
const lsCssPluginCssCdn = `${config.baseUrl}/libs/luckysheet/2.1.13/plugins/css/pluginsCss.css`

export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    loadCssRemote(lsCssCdn)
    loadCssRemote(lsCssFontCdn)
    loadCssRemote(lsCssPluginCdn)
    loadCssRemote(lsCssPluginCssCdn)
    loadRemote(lsJsPluginCdn, '$')
      .then(() => {
        return loadRemote(lsJsCdn, 'luckysheet')
      })
      .then(() => {
        this.init()
      })
  },
  methods: {
    init() {
      window.luckysheet.create({
        container: 'lucky-sheet',
        title: '测试报表',
        lang: 'zh',
        showinfobar: true,
        userInfo:
          '<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> Lucky',
        functionButton:
          '<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">下载</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">分享</button> <button id="luckysheet-share-btn-title" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">秀儿</button>',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.lucky-sheet {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}
</style>
